<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>留言板</title>
	<meta name="description" content="">
	<meta name="keywords" content="">
	<link href="" rel="stylesheet">
<style type="text/css">
	*{
		margin:0;
		padding: 0;
	}
	ul li{
		width: 300px;
		color: red;
		background-color: #000;
		/*display: inline;*/
		/*list-style-type: none;*/
	}
	img{
		width: 30px;
		height: 30px;
		/*float: left;*/
	}
	p{
		width:auto;
		height: auto;
		text-align: center;
	}
	a{
		text-decoration: none;
	}
/* 	.colora{
	background-color: #fff;
} */
</style>
</head>
<body>
	<p><a href="logout.php">退出</a></p>
	<ul>
	</ul>
	<form>
		<input type="text" name="content" value="" />
		<input type="button" name="" value="提交" onclick="osub(mask)" />
	</form>
</body>
<script src="js/jquery2.1.4.min.js"></script>
<script src="js/ceshi.js"></script>
<script type="text/javascript">
/*	$(document).ready(function(){
		// $("li:nth-child(odd)").css({"background-color":"green"});
		$("li").each(function(index){
			if (index%2 == 0 ) {
				$(this).css("background-color","green");
			}
		});
	});*/
	var mask = true;
window.onload=function (){
	// alert(tpl.join(''));
	osub(false);
}

/**
 * [dao 对数据按斑马线进行设置背景色]
 * @return {[void]} [void]
 */
function dao(doc,color){
	var doc=arguments[0]?arguments[0]:'li';
	var color = arguments[1]?arguments[1]:'green';
	var oLi = document.getElementsByTagName(doc);
	for (var i = 0; i < oLi.length; i++) {
		if (i%2 == 0) {
			oLi[i].style.background = color;
		}
	}
	// alert(oLi.length);
}
var URL = "ajax.php";
/**
 * [osub 从后台请求数据，并显示在页面上]
 * @param  {[type]} mask [是否效验输入框中的值是否为空]
 * @return {[void]}      [空]
 */
function osub(mask){
	var JSON = $('form').serialize();

	if ($("input[name = content]").val()== '' && mask == true) {
		alert('请输入内容，再提交。');
		return;
	}
	// alert(JSON);return;
	$.post(
		URL,
		JSON,
		function(data,status){
			// alert(data);return;
			if (status == 'success') {
				$("ul").empty();
				for (var i = data.length - 1; i >= 0; i--) {
					if (data[i] == 'nologin') {
						location.href = "http://hoifun.butterfly.mopaasapp.com/login.php";
						return;
					}
					$("ul").append("<li><img src='img/head.jpg' />" + data[i] + "</li>");
				}
				$("input[name = content]").val('');
				dao('li','yellow');
				// console.log(data);
			}else{
				alert('提交失败');
			}
		});
}
</script>
</html>









